<template>
	<view class="container">
		<view style="display: flex;align-items: center;">
			<span style="font-size: 28rpx;width: 140rpx;">作业方式</span>
			<uni-data-select
				:clear="false"
				v-model="missionWay"
				:localdata="range"
				@change="handlerChange"
			></uni-data-select>
		</view>
		<u--form ref="queryForm" :model="query">
			<u-form-item label="料架码" prop="rackCode" labelWidth="140rpx" v-if="missionWay === 4">
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.rackCode" 
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 4;"
				>
				</u--input>
				<u-button type="primary" style="flex: 1;margin-left: 20rpx;" @click="bindUser">绑定</u-button>
			</u-form-item>
			<u-form-item :label="missionWay === 3 ? '原箱码' : '容器码'" prop="containerCode" labelWidth="140rpx" v-if="missionWay !== 4 && missionWay !== 5 && missionWay !== 6">
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.containerCode" 
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
					@confirm="checkContainer"
				>
				</u--input>
			</u-form-item>
			<u-form-item class="RackBackInput" label="料架码" prop="rackCode" labelWidth="140rpx" v-if="missionWay === 5 || missionWay === 6">
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.rackCode" 
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="槽位码" prop="rackSlotBarcode" labelWidth="140rpx" v-if="missionWay === 1">
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.rackSlotBarcode" 
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="物料码" prop="materialCode" labelWidth="140rpx" v-if="missionWay === 2 || missionWay === 4">
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.materialCode" 
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item :label="missionWay === 3 ? '新箱码' : '容器码'" prop="otherContainerCode" labelWidth="140rpx" v-if="missionWay === 3">
				<u--input 
					placeholder="请输入/扫描" 
					v-model="query.otherContainerCode" 
					suffixIcon="scan" 
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
		</u--form>
		<!-- 列表 -->
		<view v-if="materialList.length > 0 && this.missionWay === 2">
			<uni-table ref="info" border stripe emptyText="暂无数据" style="margin: 10px 0">
				<uni-tr>
					<uni-th width="30">物料编号</uni-th>
					<uni-th width="20">数量</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in materialList" :key="index" class="td-container">
					<uni-td></uni-td>
					<uni-td></uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="commonButton" v-if="missionWay === 1">
			<u-button type="warning" @click="confirmUnBind(2)">确认解绑</u-button>
			<u-button type="primary" @click="confirmBind(2)">确认绑定</u-button>
		</view>
		<view class="commonButton" v-if="missionWay === 2">
			<u-button type="warning" @click="confirmUnBind(0)">确认解绑</u-button>
			<u-button type="primary" @click="confirmBind(0)">确认绑定</u-button>
		</view>
		<view class="commonButton" v-if="missionWay === 3">
			<u-button type="primary" @click="confirmMerge(3)">确认合箱</u-button>
		</view>
		<view class="commonButton" v-if="missionWay === 4">
			<u-button type="primary" :disabled="flag" @click="lightShelfBind">确认上架</u-button>
		</view>
		<view class="commonButton" v-if="missionWay === 5">
			<u-button type="primary" @click="shelfBack">料架回库</u-button>
		</view>
		<view class="commonButton" v-if="missionWay === 6">
			<u-button type="primary" @click="startOff">开始下架</u-button>
			<u-button type="primary" @click="completeOff">完成下架</u-button>
		</view>
		<!-- 提示组件 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import { unBindAPI, bindAPI, sortingUpByLightAPI, bindShelfAPI, shelfBackAPI, startOffAPI, completeOffAPI } from '@/api/work/move'
	import uniDataSelect from '../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	export default {
		components: {
			uniDataSelect,
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				query: {
					rackCode: '',
					containerCode: '',
					otherContainerCode: '',
					materialCode: '',
					rackSlotBarcode: ''
				},
				missionWay: 1,
				range: [
					{
						text: '容器解绑/绑定',
						value: 1
					},
					{
						text: '物料上架/下架',
						value: 2
					},
					{
						text: '合箱',
						value: 3
					},
					{
						text: '上架亮灯货架',
						value: 4
					},
					{
						text: '料架回库',
						value: 5
					},
					{
						text: '下架亮灯货架',
						value: 6
					}
				],
				flag: true,
				materialList: []
			};
		},
		methods: {
			validateData(val) {
				switch(val) {
					case 1:
						if (!this.query.containerCode) {
							return '请扫描容器码'
						}
						if (this.query.containerCode && !this.query.rackSlotBarcode) {
							return '请扫描槽位码'
						}
						return true
					case 2:
						if (!this.query.containerCode) {
							return '请扫描容器码'
						}
						if (this.query.containerCode && !this.query.materialCode) {
							return '请扫描物料码'
						}
						return true
					case 3:
						if (!this.query.containerCode) {
							return '请扫描原箱码'
						}
						if (this.query.containerCode && !this.query.otherContainerCode) {
							return '请扫描新箱码'
						}
						return true
					case 4:
						if (!this.query.materialCode) {
							return '请扫描物料码'
						}
						return true
					case 5:
						if (!this.query.rackCode) {
							return '请扫描料架码'
						}
						return true
					case 6:
						if (!this.query.rackCode) {
							return '请扫描料架码'
						}
				}
			},
			handlerChange(e) {
				if (e) {
					this.query = {
						rackCode: '',
						containerCode: '',
						otherContainerCode: '',
						materialCode: '',
						rackSlotBarcode: ''
					}
					this.flag = true
					this.materialList = []
				}
			},
			async confirmUnBind(val) {
				const submitForm = {
					containerBarcode: this.query.containerCode,
					rackSlotBarcode: this.query.rackSlotBarcode,
					itemBarcode: this.query.materialCode,
					sourceContainerBarcode: this.query.otherContainerCode
				}
				if (val === 2) {
					// 箱 槽
					submitForm.type = 2
					const result = this.validateData(1)
					if (result !== true) {
						return this.$refs.uToast.show({
							type: 'warning',
							message: result
						})
					}
				} else if (val === 0) {
					// 物 箱
					const result = this.validateData(2)
					if (result !== true) {
						return this.$refs.uToast.show({
							type: 'warning',
							message: result
						})
					}
					submitForm.type = 0
				}
				console.log(submitForm)
				const res = await unBindAPI(submitForm)
				if (res.code === 200) {
					this.query = {
						rackCode: '',
						containerCode: '',
						otherContainerCode: '',
						materialCode: '',
						rackSlotBarcode: ''
					}
					this.$refs.uToast.show({
						type: 'success',
						message: '解绑成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async confirmBind(val) {
				const submitForm = {
					containerBarcode: this.query.containerCode,
					rackSlotBarcode: this.query.rackSlotBarcode,
					itemBarcode: this.query.materialCode,
					sourceContainerBarcode: this.query.otherContainerCode
				}
				if (val === 2) {
					// 箱 槽
					submitForm.type = 2
					const result = this.validateData(1)
					if (result !== true) {
						return this.$refs.uToast.show({
							type: 'warning',
							message: result
						})
					}
				} else if (val === 0) {
					// 物 箱
					submitForm.type = 0
					const result = this.validateData(2)
					if (result !== true) {
						return this.$refs.uToast.show({
							type: 'warning',
							message: result
						})
					}
				}
				console.log(submitForm)
				const res = await bindAPI(submitForm)
				if (res.code === 200) {
					this.query = {
						rackCode: '',
						containerCode: '',
						otherContainerCode: '',
						materialCode: '',
						rackSlotBarcode: ''
					}
					this.$refs.uToast.show({
						type: 'success',
						message: '绑定成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async confirmMerge(val) {
				const result = this.validateData(3)
				if (result !== true) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: result
					})
				}
				const submitForm = {
					containerBarcode: this.query.containerCode,
					// rackSlotBarcode: this.query.rackSlotBarcode,
					// itemBarcode: this.query.materialCode,
					sourceContainerBarcode: this.query.otherContainerCode
				}
				submitForm.type = val
				console.log(submitForm)
				const res = await unBindAPI(submitForm)
				if (res.code === 200) {
					this.query = {
						rackCode: '',
						containerCode: '',
						otherContainerCode: '',
						materialCode: '',
						rackSlotBarcode: ''
					}
					this.$refs.uToast.show({
						type: 'success',
						message: '操作成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async bindUser() {
				if (!this.query.rackCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描料架码'
					})
				}
				const submitForm = {
					rackCode: this.query.rackCode
				}
				console.log(submitForm)
				const res = await bindShelfAPI(submitForm)
				if (res.code === 200) {
					this.flag = false
					this.$refs.uToast.show({
						type: 'success',
						message: '绑定料架码成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async lightShelfBind() {
				const result = this.validateData(2)
				if (result !== true) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: result
					})
				}
				const submitForm = {
					rackSlotBarcode: this.query.rackCode,
					itemBarcode: this.query.materialCode
				}
				console.log(submitForm)
				const res = await sortingUpByLightAPI(submitForm)
				if (res.code === 200) {
					this.query = {
						rackCode: '',
						containerCode: '',
						otherContainerCode: '',
						materialCode: '',
						rackSlotBarcode: ''
					}
					this.$refs.uToast.show({
						type: 'success',
						message: '上架成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async shelfBack() {
				const result = this.validateData(5)
				if (result !== true) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: result
					})
				}
				const submitForm = {
					rackCode: this.query.rackCode
				}
				const res = await shelfBackAPI(submitForm)
				if (res.code === 200) {
					this.query = {
						rackCode: '',
						containerCode: '',
						otherContainerCode: '',
						materialCode: '',
						rackSlotBarcode: ''
					}
					this.$refs.uToast.show({
						type: 'success',
						message: '操作成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			// 检测容器码
			async checkContainer() {
				if (this.missionWay !== 2) {
					return
				}
				const res = await checkContainerAPI(this.query.containerCode)
				// console.log();
				if (res.code === 200) {
					
				}
			},
			async startOff() {
				const submitForm = {
					rackCode: this.query.rackCode
				}
				const res = await startOffAPI(submitForm)
				if (res.code === 200) {
					this.query.rackCode = ''
					this.$refs.uToast.show({
						type: 'success',
						message: '操作成功'
					})
				} else {
					this.query.rackCode = ''
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async completeOff() {
				const submitForm = {
					rackCode: this.query.rackCode
				}
				const res = await completeOffAPI(submitForm)
				if (res.code === 200) {
					this.query.rackCode = ''
					this.$refs.uToast.show({
						type: 'success',
						message: '操作成功'
					})
				} else {
					this.query.rackCode = ''
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.commonButton {
		width: 100%;
		display: flex;
		gap: 20rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 15rpx;
		justify-content: space-between;
		background-color: #fff;
	}
</style>
